<template>
  <div class="resource-setting w100 h100">
    <div class="resource-top">
      <div class="resource-select">
        <div style="margin-right: 8px; font-weight: bold">CONTROLLER</div>
        <el-select v-model="currentGroup" placeholder="请选择" @change="groupChange" @visible-change="visiableChange">
          <el-option
            v-for="item in resourceGroup"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <el-button class="add-new-resource function-btn" type="primary" icon="el-icon-plus" @click="handleCreate">新增资源</el-button>
    </div>
    <div class="resource-content">
      <el-table :data='listData' stripe class='reg-tab' :header-cell-style="getRowClass" v-loading="loading">
        <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in tableHead" :key="index">
        </el-table-column>
        <el-table-column label='操作'>
          <template slot-scope='scope'>
            <el-button type='text' size='small' @click="handleEdit(scope.row)" title="编辑">
              <img src="../../../../../static/image/common/edit.png" alt=""></el-button>
            <el-button type='text' size='small' @click="handleView(scope.row)" title="查看">
              <img src="../../../../../static/image/common/preview.png" alt=""></el-button>
            <el-button type='text' size='small' @click="handleDelete(scope.row)" title="删除">
              <img src="../../../../../static/image/common/delete.png" alt=""></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--<div class="resource-bottom">-->
      <!--<span style="float:left;margin-right:10px; line-height: 25px;font-size:12px">每页: </span>-->
      <!--<el-input placeholder="条数" v-model="pageSize"-->
                <!--@blur="pagesizeChange" @keyup.enter.native="pagesizeChange" clearable> </el-input>-->
      <!--<span style="float:left;margin-right:20px; line-height: 25px;font-size:12px">条</span>-->
      <!--<el-pagination-->
        <!--@current-change="handleCurrentChange"-->
        <!--:current-page.sync="currentPage"-->
        <!--:page-size="100"-->
        <!--layout="prev, pager, next, jumper"-->
        <!--:total="total">-->
      <!--</el-pagination>-->
    <!--</div>-->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="420px" class="center">
      <view-resource :resource-form="resourceForm" v-if="isView"></view-resource>
      <create-resource :title="title" :form="resourceForm" @hide="hideDialog" v-if="!isView"></create-resource>
    </el-dialog>
    <!--删除弹出框-->
    <delete-dialog :is-show="deleteDialogShow" @close="handleClose"></delete-dialog>
  </div>
</template>

<script>
import CreateResource from './createResource'
import ViewResource from './viewResource'
import DeleteDialog from '../../../../components/CommonDialog'
import Config from '../../../../config'
export default {
  name: 'resource',
  components: {
    CreateResource,
    ViewResource,
    DeleteDialog
  },
  data () {
    return {
      resourceGroup: [],
      currentGroup: null,
      selectVisiable: false,
      loading: false,
      tableHead: [
        {prop: 'sort', label: '编号'},
        {prop: 'id', label: 'ID'},
        {prop: 'name', label: '资源名称'},
        {prop: 'code', label: '资源编码'},
        {prop: 'url', label: '资源路径'},
        {prop: 'add', label: '资源权限'},
        {prop: 'des', label: '资源描述'}
      ],
      listData: [
        { sort: '资源编码1',
          id: '1',
          name: '资源名称1',
          code: '资源编码',
          url: '资源路径',
          add: 0,
          des: '资源描述1'
        }
      ],
      // 分页
      currentPage: 1,
      pageSize: 15,
      total: 0,
      // 弹出框
      deleteDialogShow: false,
      // 删除对象
      deleteObject: null,
      dialogVisible: false,
      // 是否预览
      isView: false,
      title: '',
      RESOURCE_INSERT: '资源新增',
      RESOURCE_EDIT: '资源编辑',
      RESOURCE_VIEW: '资源预览',
      resourceForm: {
        sort: 0,
        name: '',
        code: this.currentGroup,
        url: '',
        add: 0,
        des: ''
      }
    }
  },
  mounted () {
    // this.getResource()
    this.getResourceGroup()
  },
  methods: {
    groupChange (val) {
      if (this.selectVisiable === false) {
        return
      }
      this.currentGroup = val
      this.getResourceByGroup()
    },
    visiableChange (val) {
      this.selectVisiable = val
    },
    /**
     * 每页大小变化
     * */
    pagesizeChange () {
      if (+this.pageSize === 0) {
        this.pageSize = 15
      }
      if (Number.isInteger(+this.pageSize)) {
        this.input = +this.pageSize
        this.getResource()
      } else {
        this.$message({
          message: '请输入整数',
          type: 'warning'
        })
      }
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentNode = val
      this.getResource()
    },
    /**
     * 获取所有资源组
     * */
    getResourceGroup () {
      const url = `${Config.AUTH_URL}/Resource/getCodeByGroup`
      this.$http.get(url)
        .then(data => {
          this.resourceGroup.splice(0)
          this.currentGroup = data[0]
          data.forEach(item => {
            this.resourceGroup.push({
              label: item,
              value: item
            })
          })
          this.getResourceByGroup()
        })
    },
    /**
     * 根据资源group查询资源列表
     * */
    getResourceByGroup () {
      const url = `${Config.AUTH_URL}/Resource/getResourceByRoleAndAll`
      const param = {
        code: this.currentGroup,
        roleId: 0
      }
      this.$http.get(url, param)
        .then(data => {
          const list = data.all
          this.listData.splice(0)
          list.forEach(item => {
            this.listData.push(item)
          })
        })
    },
    /**
     * 从后台获取资源列表
     * */
    getResource () {
      const url = `${Config.AUTH_URL}/Resource/getByPageList`
      const param = {
        offset: this.currentPage - 1,
        pagesize: this.pageSize
      }
      this.$http.get(url, param)
        .then(data => {
          const list = data.pageList
          this.listData.splice(0)
          list.forEach(item => {
            this.listData.push(item)
          })
          this.total = data.totalCount
        })
    },
    /**
     * table头部改变颜色
     * */
    getRowClass ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#fafbfc'
      } else {
        return ''
      }
    },
    /**
     * 新增
     * */
    handleCreate () {
      this.title = this.RESOURCE_INSERT
      this.dialogVisible = true
      this.isView = false
      this.resourceForm = {
        sort: 0,
        name: '',
        code: this.currentGroup,
        url: '',
        add: 0,
        des: ''
      }
    },
    /**
     * 编辑
     * */
    handleEdit (row) {
      this.title = this.RESOURCE_EDIT
      this.resourceForm = null
      this.resourceForm = row
      this.dialogVisible = true
      this.isView = false
    },
    /**
     * 预览
     * */
    handleView (row) {
      this.title = this.RESOURCE_VIEW
      this.resourceForm = null
      this.resourceForm = row
      this.dialogVisible = true
      this.isView = true
    },
    /**
     * 删除
     * */
    handleDelete (row) {
      this.deleteObject = row
      this.deleteDialogShow = true
    },
    handleClose (id) {
      this.deleteDialogShow = false
      if (!id) {
        this.deleteObject = null
        return
      }
      const url = `${Config.AUTH_URL}/Resource/delete?id=${this.deleteObject.id}`
      this.$http.post(url)
        .then(data => {
          this.deleteObject = null
          this.$message.success('删除成功')
          this.getResource()
        })
    },
    /**
     * 关掉dialog
     * */
    hideDialog (success) {
      if (success === 'cancel') {
        this.dialogVisible = false
        return
      }
      if (success === true) {
        this.$message.success('保存成功')
        this.dialogVisible = false
        this.getResourceByGroup()
        return
      }
      this.$message.success('保存成功')
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../../../static/scss/common";
  .resource-setting {
    background-color: #fff;
    border: 1px solid #E4E4E4;
    position: relative;
    box-sizing: border-box;
    padding: 0 30px 26px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .resource-top {
      .add-new-resource {
        position: absolute;
        top: 24px;
        right: 29px;
      }
      .resource-select {
        position: absolute;
        top: 24px;
        left: 30px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
    }
    .resource-top /deep/ .el-select .el-input__inner {
      width: 200px;
      height: 28px;
      line-height: 28px;
    }
    .resource-top /deep/ i.el-select__caret {
      height: 28px;
      line-height: 28px;
    }
    .resource-content {
      flex: 1;
      margin-top: 70px;
    }
    .resource-bottom {
      margin-top: 38px;
      text-align: right;
      .el-dialog__headerbtn {
        top: 11px;
      }
    }
    .resource-bottom /deep/ .el-input {
      float:left;
      width:56px;
      margin: 0 6px;
      .el-input__inner {
        height: 26px;
        line-height: 26px;
        border: 1px solid #e4e4e4;
        padding-left: 5px;
      }
    }
  }
  .resource-setting /deep/ .el-dialog__headerbtn {
    top: 12px;
  }
</style>
